<template>
    <div class="second_level_page achievement_page">
        <section class="tab_section">
            <div class="tab active">销售代表</div>
            <div class="tab">仓库管理员</div>
            <div class="tab">物流管理员</div>
        </section>
        <section class="achievement_main marginTop">
            <div class="achievement_demo">
                <div class="time">
                    <img src="../../../images/achievementIcon.png">
                    2017年03月
                </div>
                <div class="content">
                    <div class="content_main">
                        <div class="text">
                            <span>本月业绩：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>单次最高：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>累计业绩：</span>￥62678.00
                        </div>                        
                    </div>
                    <div class="btn">
                        查看奖金
                    </div>
                </div>
            </div>
            <div class="achievement_demo">
                <div class="time">
                    <img src="../../../images/achievementIcon.png">
                    2017年03月
                </div>
                <div class="content">
                    <div class="content_main">
                        <div class="text">
                            <span>本月业绩：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>单次最高：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>累计业绩：</span>￥62678.00
                        </div>                        
                    </div>
                    <div class="btn">
                        查看奖金
                    </div>
                </div>
            </div>
            <div class="achievement_demo">
                <div class="time">
                    <img src="../../../images/achievementIcon.png">
                    2017年03月
                </div>
                <div class="content">
                    <div class="content_main">
                        <div class="text">
                            <span>本月业绩：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>单次最高：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>累计业绩：</span>￥62678.00
                        </div>                        
                    </div>
                    <div class="btn">
                        查看奖金
                    </div>
                </div>
            </div>
            <div class="achievement_demo">
                <div class="time">
                    <img src="../../../images/achievementIcon.png">
                    2017年03月
                </div>
                <div class="content">
                    <div class="content_main">
                        <div class="text">
                            <span>本月业绩：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>单次最高：</span>￥62678.00
                        </div>
                        <div class="text">
                            <span>累计业绩：</span>￥62678.00
                        </div>                        
                    </div>
                    <div class="btn">
                        查看奖金
                    </div>
                </div>
            </div>
        </section>
    </div> 
</template>

<script>           
    export default {
        data(){
            return{
            }
        },
        mounted(){
        },
        components: {
        },         
        methods: {
        },
    }
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.3rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .achievement_main{
        padding: .2rem 0 0 .2rem;
        .achievement_demo{
            @include wh(100%, 2.56rem);
            .time{
                @include wh(100%, .38rem);
                @include sc(.32rem, $blue);
                line-height: .38rem;
                img{
                    @include wh(.38rem, .38rem);
                    float: left;
                    margin-right: .2rem;
                }
            }
            .content{
                position: relative;
                margin-left: .19rem;
                border-left: .02rem solid $blue;
                height: 2.18rem;
                padding: .2rem 0;
                .content_main{
                    background: #fff;
                    height: 1.78rem;
                    padding: .2rem .4rem;
                    .text{
                        @include sc(.28rem, #0e0e0e);
                        line-height: .48rem;
                        span{
                            color: #666;
                        }
                    }
                }
                .btn{
                    @include wh(1.6rem, .54rem);
                    @include sc(.28rem, $blue);
                    position: absolute;
                    right: .2rem;
                    bottom: .42rem;
                    border: .01rem solid $blue;
                    border-radius: .05rem;
                    text-align: center;
                    line-height: .52rem;
                }
            }
        }
    }
</style>
